<template>
  <div class="app-container home">
    <!-- 新增控制按钮容器 -->
    <div class="control-bar">
      <el-button type="primary" @click="dialogVisible = true" class="control-button">
        主页控制台
      </el-button>
    </div>
    <el-dialog title="主页组件显示控制" v-model="dialogVisible" width="400px" class="component-control-dialog">
      <div class="switch-container">
        <el-form label-position="left" label-width="220px">
          <!-- 每个表单项 -->
          <el-form-item label="借阅统计">
            <el-switch v-model="showUserTaskStats" active-color="#409EFF" inactive-color="#dcdfe6"></el-switch>
          </el-form-item>

          <el-form-item label="归档统计">
            <el-switch v-model="showSkuSaleStats" active-color="#409EFF" inactive-color="#dcdfe6"></el-switch>
          </el-form-item>

          <el-form-item label="活跃用户">
            <el-switch v-model="showSkuSaleRankChart" active-color="#409EFF" inactive-color="#dcdfe6"></el-switch>
          </el-form-item>

          <el-form-item label="借阅数据">
            <el-switch v-model="showSkuSaleCollectChart" active-color="#409EFF" inactive-color="#dcdfe6"></el-switch>
          </el-form-item>

          <el-form-item label="库房档案柜数量分布">
            <el-switch v-model="showPartnerNodeCollectChart" active-color="#409EFF"
              inactive-color="#dcdfe6"></el-switch>
          </el-form-item>

          <el-form-item label="异常设备监控">
            <el-switch v-model="showAbnormalEquipmentTable" active-color="#409EFF" inactive-color="#dcdfe6"></el-switch>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-row :gutter="20">
      <el-col :span="18">
        <el-row :gutter="20">
          <el-col :span="13" v-if="showUserTaskStats" >
            <home-user-task-stats :taskData="userTaskData"/>
          </el-col>
          <el-col :span="11" v-if="showSkuSaleStats" >
            <home-sku-sale-stats :skuData="skuSaleData"/>
          </el-col>
        </el-row>
        <sku-sale-collect-chart v-if="showSkuSaleCollectChart" :collectData="skuSaleCollectData"/>
      </el-col>
      <el-col :span="6" v-if="showSkuSaleRankChart">
        <sku-sale-rank-chart :rankData="skuSaleRankData" />
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="14" v-if="showPartnerNodeCollectChart">
        <partner-node-collect-chart :nodeData="partnerNodeCollectData" />
      </el-col>
      <el-col :span="10" v-if="showAbnormalEquipmentTable">
        <abnormal-equipment-table />
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Home">
import HomeUserTaskStats from './components/home-user-task-stats.vue';
import HomeSkuSaleStats from './components/home-sku-sale-stats.vue';
import SkuSaleRankChart from './components/sku-sale-rank-chart.vue';
import SkuSaleCollectChart from './components/sku-sale-collect-chart.vue';
import PartnerNodeCollectChart from './components/partner-node-collect-chart.vue';
import AbnormalEquipmentTable from './components/abnormal-equipment-table.vue'

import { onMounted, ref } from 'vue';
import { listStatistics } from '@/api/manage/statistics';

const dialogVisible = ref(false);
const showUserTaskStats = ref(true);
const showSkuSaleStats = ref(true);
const showSkuSaleRankChart = ref(true);
const showSkuSaleCollectChart = ref(true);
const showPartnerNodeCollectChart = ref(true);
const showAbnormalEquipmentTable = ref(true);

const userTaskData = ref({});
const skuSaleData = ref({});
const skuSaleCollectData = ref([]);
const skuSaleRankData = ref([]);
const partnerNodeCollectData = ref([]);
const statistics = ref();

onMounted(() => {
    listStatistics().then(response => {
      statistics.value = response.rows;
      userTaskData.value = {
        data1: statistics.value[0].totalBorrows,
        data2: statistics.value[0].totalReturns,
        data3: statistics.value[0].totalLoans,
        data4: statistics.value[0].totalLost,
      };
      skuSaleData.value = {
        data1: statistics.value[0].archivedCount,
        data2: statistics.value[0].pendingCount,
      };
      skuSaleCollectData.value[0] = statistics.value[0].electronicCount;
      skuSaleCollectData.value[1] = statistics.value[0].physicalCount;
      skuSaleRankData.value = JSON.parse(statistics.value[0].activeUserList);
      partnerNodeCollectData.value = {
        cabinetCount: statistics.value[0].cabinetCount,
        repositoryCount: statistics.value[0].repositoryCount,
        seriesData: JSON.parse(statistics.value[0].seriesData),
      }
    });
})
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: 'open sans',
  'Helvetica Neue',
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }

  :deep(.box) {
    padding: 20px;
    border-radius: 20px;

    .title,
    .header {
      display: flex;

      .el-icon {
        cursor: pointer;
      }
    }

    .title {
      align-items: center;
      flex: 1;
      font-size: 16px;
      font-weight: 600;
      color: #333;

    }

    .sub-title {
      margin-left: 10px;
      font-size: 12px;
      font-weight: 400;
      color: #999;
    }
  }

  .chart {
    position: relative;
    display: inline-block;
    width: 50%;
    height: 100%;
  }

  .sku-sale-rank {
    flex-direction: column;
    height: calc(60vh - 72px);
    min-height: 538px;
    background: #fff;
    border-radius: 20px;
  }

  // 新增控制栏样式
  .control-bar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
    padding: 0 10px;

    // 如果需要固定在右上角
    // position: fixed;
    // top: 20px;
    // right: 30px;
    // z-index: 999;
  }

  // 调整按钮样式
  .control-button {
    // 如果需要更大尺寸
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    }
  }

  .component-control-dialog {
    border-radius: 8px;
  }

  .switch-container {
    padding: 20px 30px;
  }

  .el-form-item {
    margin-bottom: 18px;
    padding: 12px 0;
    border-bottom: 1px solid #ebeef5;
  }

  .el-form-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
  }

  .el-form-item__label {
    font-size: 14px;
    color: #606266;
    font-weight: 500;
  }

  /* 调整开关大小 */
  .el-switch {
    transform: scale(1.1);
    margin-left: 10px;
  }

  /* 标题样式 */
  :deep(.el-dialog__title) {
    font-size: 16px;
    color: #303133;
    font-weight: 600;
  }
}
</style>
